@mediaonlyscreendesktop

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. CSS media queries are essential for creating responsive web pages.

响应式 Web 设计 - 媒体查询 媒体 (media)查询在 CSS3 上有介绍：CSS3 @media 查询。 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

Logical operators can be used to compose a complex media query: not, and, and only. You can also combine multiple media queries into a single rule by separating them with commas.

CSS 中的 @media 屬性，提供了一種強大的方式，來針對不同的設備和螢幕尺寸，設計和應用樣式。 這篇文章將介紹 @media 是什麼，以及如何使用它來創建響應式網站。

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

We currently only have the browser screen to make those changes via media queries. That’s unfortunate, as the viewport isn’t always a direct relationship to how big the element itself is.

在本教程中，我们将学习媒体查询中’screen’和’only screen’之间的区别。 在媒体查询中，什么是屏幕？ 在CSS中，我们使用’screen’关键字在媒体查询中来针对所有带有屏幕的设备，例如平板电脑、移动电话、桌面计算机、打印机、屏幕阅读器等。 用户可以按照以下语法在媒体查询中使用’screen’关键字。 在上面的语法中，使用条件来设置不同设备的断点。 在下面的示例中，我们在CSS中使用了媒体查询的